import 'package:flutter/material.dart';
import 'my_drawer.dart';

// 一个完整的页面可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等
// 1. Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面
// 2. AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等
/*
  AppBar({
  Key key,
  this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
  this.automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮
  this.title,// 页面标题
  this.actions, // 导航栏右侧菜单
  this.bottom, // 导航栏底部菜单，通常为Tab按钮组
  this.elevation = 4.0, // 导航栏阴影
  this.centerTitle, //标题是否居中 
  this.backgroundColor,
  ...   //其它属性见源码注释
})
 */
class ScaffoldPageRoute extends StatefulWidget {
  @override
  _ScaffoldPageRouteState createState() => _ScaffoldPageRouteState();
}

class _ScaffoldPageRouteState extends State<ScaffoldPageRoute>
    with SingleTickerProviderStateMixin {
  // ignore: unused_field
  int _selectedIndex = 1;

  TabController _tabController;
  List tabs = ['新闻', '历史', '图片'];

  @override
  void initState() {
    super.initState();
    // 创建tabController
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 导航栏
      appBar: AppBar(
        title: Text('App Name'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {},
          ),
        ],
        // 自定义左item
        leading: Builder(
          builder: (context) {
            return IconButton(
              icon: Icon(
                Icons.dashboard,
                color: Colors.white,
              ),
              onPressed: () {
                // 打开抽屉菜单
                Scaffold.of(context).openDrawer();
              },
            );
          },
        ),
        backgroundColor: Colors.blueAccent,
        // tabbar菜单
        bottom: TabBar(
          controller: _tabController,
          tabs: tabs.map((e) => Tab(text: e)).toList(), // Tab可自定义
          indicatorColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.label,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        // 创建Tab页
        children: tabs.map((e) {
          return Container(
            alignment: Alignment.center,
            child: Text(
              e,
              textScaleFactor: 5,
              style: TextStyle(color: Colors.black),
            ),
          );
        }).toList(),
      ),
      backgroundColor: Colors.white,
      // 抽屉
      drawer: MyDrawer(),
      // 底部导航
      // bottomNavigationBar: BottomNavigationBar(
      //   items: <BottomNavigationBarItem>[
      //     BottomNavigationBarItem(
      //       icon: Icon(Icons.home),
      //       title: Text('家'),
      //     ),
      //     BottomNavigationBarItem(
      //       icon: Icon(Icons.business),
      //       title: Text('公司'),
      //     ),
      //     BottomNavigationBarItem(
      //       icon: Icon(Icons.school),
      //       title: Text('学校'),
      //     ),
      //   ],
      //   currentIndex: _selectedIndex,
      //   fixedColor: Colors.blueAccent,
      //   onTap: _onItemTapped,
      // ),
      bottomNavigationBar: customBottomBar,
      // 悬浮按钮
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.blueAccent,
        foregroundColor: Colors.white,
        onPressed: _onAdd,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  // ignore: unused_element
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onAdd() {}

  Widget customBottomBar = BottomAppBar(
    color: Colors.blueAccent,
    shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround, // 均分底部导航栏横向空间
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.home),
          onPressed: () {},
        ),
        SizedBox(), // 中间位置空出
        IconButton(
          icon: Icon(Icons.business),
          onPressed: () {},
        ),
      ],
    ),
  );
}
